<template>
  <!-- 这是商城————家中常备 -->
  <keep-alive>
    <div class="ShopList">
      <!-- 头部区域 -->
      <van-nav-bar title="家中常备" left-arrow @click="onClickLeft">
        <template #right>
          <van-icon name="bars" size="0.55rem" />
        </template>
      </van-nav-bar>
      <!-- 渲染列表区域 -->
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="true"
      >
        <ul>
          <li
            v-for="item in mallshoplist"
            :key="item._id"
            @click="handClick(item)"
          >
            <img :src="item.imgUrl" alt="" />
            <h4>{{ item.title }}</h4>
            <div class="price">
              <p>{{ item.price }}</p>
              <span class="vip">会员八折</span>
            </div>
            <p class="zhiyun">智云自营店</p>
          </li>
        </ul>
      </van-list>
    </div>
  </keep-alive>
</template>
<script>
// import { Toast } from 'vant';
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { getmallshoplistApi } from "../utils/api";
export default {
  setup() {
    // const onClickLeft = () => Toast("返回");
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    const handClick = (item) => {
      // console.log(item);
      router.push("/detail/" + item._id);
    };
    const value = ref("");
    let curr = ref(1);
    const mallshoplist = reactive([]);
    const state = reactive({
      loading: false,
      finished: false,
    });
    const onLoad = () => {
      setTimeout(async () => {
        const res = await getmallshoplistApi({
          curr: curr.value,
          pagesize: 4,
          token: sessionStorage.getItem("token"),
        });
        if (res.result.length == 0) {
          state.finished = true;
        } else {
          mallshoplist.push(...res.result);
          mallshoplist.value = res.mallshoplist;
          state.loading = false;
          curr.value++;
        }
      }, 300);
    };
    return {
      onClickLeft,
      mallshoplist,
      handClick,
      value,
      onLoad,
      state,
    };
  },
};
</script>
<style lang="less" scoped>
.ShopList {
  width: 100%;
  height: 2220px;
  background: rgb(238, 234, 234);
  ul {
    width: 100%;
    height: 100%;
    li {
      width: 170px;
      height: 255px;
      padding: 5px;
      margin: 10px 5px 0px 10px;
      background: #fff;
      float: left;
      img {
        width: 130px;
        height: 130px;
        margin-left: 15px;
      }
      img,
      h4,
      .price,
      .zhiyun {
        margin-top: 10px;
        text-align: start;
        font-size: 14px;
      }
      h4,
      .price,
      .zhiyun {
        margin-left: 15px;
      }
      h4 {
        width: 130px;
        height: 40px;
      }
      .price {
        font-size: 16px;
        color: red;
        position: relative;
        .vip {
          font-size: 12px;
          background: #999999;
          border: 2px solid #000000;
          border-radius: 4px;
          color: #fff4ae;
          position: absolute;
          left: 70px;
          top: 0px;
        }
      }
      .zhiyun {
        color: #999999;
      }
    }
  }
}
</style>
